<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作:元素以及元素内容的部分 
		.html()            无参---功能:获取匹配元素当中的第一个元素的内容
		                   有参---功能:【设置】将匹配的元素集合当中的所有元素替换为新元素
		特点：针对  内容  +  元素
		.val()             无参---功能:表单内的元素：input select生效
		                               获取表单元素中第一个元素内容
									   
		                   有参---功能:【设置】表单内的元素：input select生效
                             input元素直接显示 value
		                     select元素不是直接显示
							 option  元素中的内容：用户显示
							 option 元素中value值，
							 必须是当前select中 option的value值
							 直接赋值：打印select元素对象名称 [object Object]
	特点：针对 (表单内form元素可以包裹)元素的内容
		.text()            无参------功能：获取匹配元素集合中所有元素的文本内容
		                   有参------功能：设置匹配元素集合中所有元素的文本
						               内容【替换】
	特点：只能针对文本元素  元素存在内容
		-->
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮—针对html()函数-有参</button>
		<span>你叫什么名字</span>
		<span>不记得了才怪</span>
		<h1>val函数使用</h1>
		<button>按钮——针对val()函数——无参</button>
		<input type="text"   value="文本框真实数据"/>
		<input type="text"   value="文本框真实数据2"    placeholder="输入框显示效果"/>
		<button class="btn">按钮——针对val()函数——有参</button>
		<select>
		<option value="rem1">lorem1</option>
		<option value="rem2">lorem2</option>
		<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮——针对text()函数——无参</button>
		<button class="btn2">按钮——针对text()函数——有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			/*  js变量【var i=1】==jq变量  var 变量名=值，元素
			    无参数    html()函数使用
			*/
		  /* var html=$("span").html(); */
		   //BOM方式 打印数据
		  /* alert("无参数获取第一个元素的内容: "+html); */
		   
		  /* $("button").click(function(){
			   $("span").html("lorme");
		   }); */
		   
		   
		   
		   /* 动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来*/
		   /*注意： js变量名不可以为关键字     in是关键字   */
		   /* $("button").click(function(){
			   var s=$("input").val();
			   alert("val()函数无参:" +s);
		   }); */
		   
		   //$(".btn").click(function(){
			//设置元素第一个的值  2.直接设置下拉列表中value的值
			/* 抓下拉列表的value值----select*/
			 //$("select").val("rem3");
			 //设置元素第一个的值  2.给第一个值添加，设置的内容【本身存在】
			 //var rem=$("select").val();
			//[object Object]  JavaScript中对象的默认字符串表示形态 
			//Select元素 对象 输出 [object Object]
			
			/* value的值是真实的数据，option是显示的值 */
			/* object Object    测试-改成无参 */
			//alert("val()有参函数"+rem);
		  // });
		  
		  //找到类名为btn1的按钮-点击--弹窗内容 p
		   $(".btn1").click(function(){
			  var text= $("p").text();
			  alert("text无参获取"+text);
		  }); 
		   
		   //找到类名为btn2的按钮-点击--文本内容 修改文本
		   $(".btn2").click(function(){
			  $("p").text("修改文本");
		   });
		</script>
	</body>
</html>